refactor(hooks): rewrite useBreadcrumbs hook

* use next/router to get the slug instead of using props
* handle cases where the current page title is not provided
* update JSON-LD schema to match the example in documentation
* add tests

1 files changed, 13 insertions, 15 deletions

diff --git a/src/pages/blog/page/[number].tsx b/src/pages/blog/page/[number].tsx
index ec465c2..906a08e 100644
--- a/src/pages/blog/page/[number].tsx
+++ b/src/pages/blog/page/[number].tsx
@@ -44,7 +44,7 @@ import type {
   WPTopicPreview,
 } from '../../../types';
 import { CONFIG } from '../../../utils/config';
-import { ROUTES } from '../../../utils/constants';
+import { PAGINATED_ROUTE_PREFIX, ROUTES } from '../../../utils/constants';
 import {
   getBlogSchema,
   getLinksItemData,
@@ -55,14 +55,14 @@ import {
 import { loadTranslation, type Messages } from '../../../utils/helpers/server';
 import {
   useArticlesList,
-  useBreadcrumb,
+  useBreadcrumbs,
   useRedirection,
   useThematicsList,
   useTopicsList,
 } from '../../../utils/hooks';
 
 const renderPaginationLink: RenderPaginationLink = (pageNum) =>
-  `${ROUTES.BLOG}/page/${pageNum}`;
+  `${ROUTES.BLOG}${PAGINATED_ROUTE_PREFIX}/${pageNum}`;
 
 type BlogPageProps = {
   data: {
@@ -86,7 +86,8 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
   useRedirection({
     isReplacing: true,
     to: ROUTES.BLOG,
-    whenPathMatches: (path) => path === `${ROUTES.BLOG}/page/1`,
+    whenPathMatches: (path) =>
+      path === `${ROUTES.BLOG}${PAGINATED_ROUTE_PREFIX}/1`,
   });
 
   const intl = useIntl();
@@ -184,10 +185,9 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
     },
   };
 
-  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
-    title: messages.pageTitle,
-    url: `${ROUTES.BLOG}/page/${pageNumber}`,
-  });
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumbs(
+    messages.pageTitle
+  );
 
   const webpageSchema = getWebPageSchema({
     description: messages.seo.metaDesc,
@@ -200,7 +200,11 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
     locale: CONFIG.locales.defaultLocale,
     slug: ROUTES.BLOG,
   });
-  const schemaJsonLd = getSchemaJson([webpageSchema, blogSchema]);
+  const schemaJsonLd = getSchemaJson([
+    webpageSchema,
+    blogSchema,
+    breadcrumbSchema,
+  ]);
 
   const renderPaginationLabel: RenderPaginationItemAriaLabel = useCallback(
     ({ kind, pageNumber: number, isCurrentPage }) => {
@@ -270,12 +274,6 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({
         // eslint-disable-next-line react/no-danger -- Necessary for schema
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <Script
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-breadcrumb"
-        type="application/ld+json"
-      />
       <PageHeader
         heading={messages.pageTitle}
         meta={{ total: data.posts.pageInfo.total }}